import React, { useState } from 'react';
import Link from 'next/link';
import { ArrowLeftIcon } from '@heroicons/react/24/outline';
import ContactsList from '@/components/phone/ContactsList';
import ContactsSearch from '@/components/phone/ContactsSearch';
import ContactActions from '@/components/phone/ContactActions';

const ContactsPage: React.FC = () => {
  const [searchQuery, setSearchQuery] = useState('');

  return (
    <div className="min-h-screen bg-white flex flex-col">
      {/* Header */}
      <div className="flex items-center justify-center px-4 py-3 bg-white border-b border-gray-100 relative">
        <Link href="/service/phone" className="absolute left-4">
          <ArrowLeftIcon className="w-6 h-6 text-gray-600" />
        </Link>
        <span className="text-lg font-medium text-gray-800">通讯录</span>
      </div>

      {/* Search Bar */}
      <ContactsSearch value={searchQuery} onChange={setSearchQuery} />

      {/* Contacts List */}
      <ContactsList searchQuery={searchQuery} />

      {/* Contact Actions */}
      <ContactActions />

      {/* Bottom Navigation */}
      <div className="border-t border-gray-100 bg-white">
        <div className="flex items-center h-14">
          <Link
            href="/service/phone"
            className="flex-1 h-full flex items-center justify-center text-gray-600"
          >
            <span className="text-base font-medium">电话</span>
          </Link>
          <div className="w-px h-8 bg-gray-200" />
          <Link
            href="/service/phone/contacts"
            className="flex-1 h-full flex items-center justify-center text-green-600"
          >
            <span className="text-base font-medium">通讯录</span>
          </Link>
        </div>
      </div>
    </div>
  );
};

export default ContactsPage;